<template>
  <view>
    <!-- 图文信息 -->
    <block v-for="(item, index) in list">
      <view class="tn-flex tn-padding list__item list__article" @click="goto('/pages/article/view', item.id)">
        <view class="tn-padding-right-sm" v-if="item.picture">
          <view>
            <image :src="item.picture" lazy-load :lazy-load-margin="1" mode="aspectFill"></image>
          </view>
        </view>
        <view>
          <view class="tn-flex tn-flex-row-between tn-flex-col-between">
            <view class="justify-content-item">
              <text class="tn-color-cat tn-text-md tn-text-bold">{{ item.title || '' }}</text>
            </view>
          </view>
          <view class=" tn-padding-top-xs  tn-text-ellipsis-2">
            <text class="tn-color-gray">
              {{ item.description || '' }}
            </text>
          </view>
          <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-sm">
            <view v-if="item.category" class="justify-content-item tn-text-center">
              <text class="tn-padding-right-xs">#</text> {{ item.category.title || '' }}
            </view>
            <view class="justify-content-item tn-flex tn-flex-col-center">
              <view class="tn-color-gray tn-text-sm">
                <text class="tn-icon-share-square tn-padding-right-xs"></text>
                <text class="tn-padding-right">{{ item.share_total }}</text>
                <text class="tn-icon-star tn-padding-right-xs"></text>
                <text class="tn-padding-right">{{ item.collection_total }}</text>
                <text class="tn-icon-praise tn-padding-right-xs"></text>
                <text class="">{{ item.approval_total }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </block>
  </view>
</template>

<script>
  import base from '@/common/mixin/base.js';
	import request from '@/common/request.js';
  
  export default {
    name: 'CxArticleList',
    mixins: [base],
		props: {
			query: {
			  type: Object
			},
			list: {
			  type: Array
			}
		},
    data() {
      return {
      	model: 'business/article',
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/static/scss/common.scss';
</style>
